<!DOCTYPE html>
<html>
<head>
    <title>info</title>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/demo/demo.css}">
    <script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
</head>
<body>
<table class="easyui-datagrid" title="Basic DataGrid" style="width:100%;height:100%"
       data-options="
       singleSelect:true,
       collapsible:true,
       url:'/page',
       method:'get',
       toolbar:toolbar,
       fit:true,
       pagination:true,
       fitColumns:true,
	   pageSize:10
">
    <thead>
    <tr>
        <th data-options="field:'id',width:80,checkbox:true">学生编号</th>
        <th data-options="field:'name',width:100">姓名</th>
        <th data-options="field:'age',width:80,align:'left'">年龄</th>
        <!--<th data-options="field:'gender',width:80,align:'left'">性别</th>-->
    </tr>
    </thead>
</table>
<script type="text/javascript">
    var toolbar = [{
        text:'添加',
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },{
        text:'删除',
        iconCls:'icon-remove',
        handler:function(){alert('cut')}
    },'-',{
        text:'修改',
        iconCls:'icon-edit',
        handler:function(){alert('save')}
    }];
</script>
</body>
</html>